<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>森尼的个人博客</title>
    <meta name="generator" content="VuePress 1.5.0">
    
    <meta name="description" content="">
    <link rel="preload" href="/pblog/assets/css/0.styles.8f416918.css" as="style"><link rel="preload" href="/pblog/assets/js/app.44691e48.js" as="script"><link rel="preload" href="/pblog/assets/js/2.0687b84f.js" as="script"><link rel="preload" href="/pblog/assets/js/8.5f1bb801.js" as="script"><link rel="prefetch" href="/pblog/assets/js/3.21da0dec.js"><link rel="prefetch" href="/pblog/assets/js/4.23e05225.js"><link rel="prefetch" href="/pblog/assets/js/5.abf5f534.js"><link rel="prefetch" href="/pblog/assets/js/6.54cb6cbe.js"><link rel="prefetch" href="/pblog/assets/js/7.82f234f2.js"><link rel="prefetch" href="/pblog/assets/js/9.ac42b5ff.js">
    <link rel="stylesheet" href="/pblog/assets/css/0.styles.8f416918.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/pblog/" class="home-link router-link-active"><img src="/pblog/assets/img/jienigui.jpg" alt="森尼的个人博客" class="logo"> <span class="site-name can-hide">森尼的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/pblog/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/pblog/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/pblog/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/html/" class="nav-link">
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/es6/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  ES6
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><a href="https://gitee.com/jackson01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://www.cnblogs.com/jackson1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Cnblog
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/pblog/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/pblog/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/pblog/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/html/" class="nav-link">
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/es6/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  ES6
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><a href="https://gitee.com/jackson01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://www.cnblogs.com/jackson1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Cnblog
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><div class="language- extra-class"><pre><code>ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。（块级作用域）
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
</code></pre></div><h2 id="let-命令"><a href="#let-命令" class="header-anchor">#</a> let 命令</h2> <ol><li>代码块内有效： let 是在代码块内有效，var 是在全局范围内有效:</li> <li>不能重复声明： let 只能声明一次 var 可以声明多次:</li> <li>for 循环计数器很适合用 let：</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出十个 10</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出 0123456789</span>
</code></pre></div><ol start="4"><li>不存在变量提升 :  let 不存在变量提升，var 会变量提升</li></ol> <h2 id="const-命令"><a href="#const-命令" class="header-anchor">#</a> const 命令</h2> <div class="language- extra-class"><pre><code>const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
</code></pre></div><h5 id="暂时性死区"><a href="#暂时性死区" class="header-anchor">#</a> 暂时性死区:</h5> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> <span class="token constant">PI</span> <span class="token operator">=</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// ReferenceError: PI is not defined</span>
  <span class="token keyword">const</span> <span class="token constant">PI</span> <span class="token operator">=</span> <span class="token string">&quot;3.1415926&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。</p> <h2 id="注意要点"><a href="#注意要点" class="header-anchor">#</a> 注意要点</h2> <div class="language- extra-class"><pre><code>const 如何做到变量在声明初始化之后不允许改变的？其实 const 其实保证的不是变量的值不变，
而是保证变量指向的内存地址所保存的数据不允许改动。此时，你可能已经想到，简单类型和复
合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 
boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。
而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了
一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变
就无法控制了，所以使用 const 声明复杂类型对象时要慎重。
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/pblog/assets/js/app.44691e48.js" defer></script><script src="/pblog/assets/js/2.0687b84f.js" defer></script><script src="/pblog/assets/js/8.5f1bb801.js" defer></script>
  </body>
</html>
